<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in list" :key="index">
        <img class="swiper-img" :src=slide.imgUrl alt=''></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name:"HomeSwiper",
    props: {
      list:Array
    },
    data () {
      return {
        swiperOption: {
          /* pagination: {
            el: '.swiper-pagination'
          }, */
          pagination:'.swiper-pagination',
          loop:true
        },
        /* swiperSlides: [{
          id:'0001',
          imgUrl:'https://imgs.qunarzz.com/sight/p0/1910/b7/b70a5d784789a39a3.img.jpg_710x360_78d254af.jpg'
        },{
          id:'0002',
          imgUrl:'https://imgs.qunarzz.com/sight/p0/1412/36/fc5094c9d8332145eefdafc6f59c8157.water.jpg_710x360_57ed1d05.jpg'
        },{
          id:'0003',
          imgUrl:'https://imgs.qunarzz.com/sight/p0/201405/27/27dc8cb5de11a8dc143b1e7d72625396.jpg_710x360_81d31286.jpg'
        },{
          id:'0004',
          imgUrl:'https://imgs.qunarzz.com/sight/p0/1412/29/30396114cc60d48d4053b95becbd3977.water.jpg_710x360_7fdb6e75.jpg'
        },{
          id:'0005',
          imgUrl:'https://imgs.qunarzz.com/sight/p0/1412/98/54066a2b46fbe437011fae0a8b3e97fc.water.jpg_710x360_2df7d293.jpg'
        }] */
      }
    },
    mounted() {
      /* setInterval(() => {
        console.log('simulate async data')
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000) */
    }
  }
</script>

<style lang='stylus' scoped>
  .wrapper>>>.swiper-pagination-bullet-active
    background :#fff
  .wrapper
    overflow:hidden
    width :100%
    height :0
    padding-bottom :50.25%
    .swiper-img
      width:100%
</style>